import React, { useState, useEffect } from 'react'
import { View, Image, Swiper, SwiperItem, Text } from '@tarojs/components'
import { AtCountdown,AtTag } from 'taro-ui'


import './index.less'
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/countdown.scss";
import "taro-ui/dist/style/components/tag.scss";

export default (props: any) => {
  const { src,price,priceOld,title,numOld,endTime } = props.data
  const imgList = src?src.split('&'):[]
  const [seconds,setSeconds] = useState(0)
  // 倒计时结束
  const onTimeUp = () => {}
  const formatDiscount = (p1,p2)=>{
    const str = (Math.round(p1/p2*10 * Math.pow(10, 1)) / Math.pow(10, 1)).toFixed(1)
    return str    
  }
  useEffect(()=>{
    setSeconds(new Date(endTime).getTime()/1000-new Date().getTime()/1000)
  },[props.data])
  return (
    <View className='topInfo'>
      <Swiper
        className='swiper'
        indicatorColor='#999'
        indicatorActiveColor='#333'
        circular
        indicatorDots
        autoplay>
        {
          imgList.map((item, i) => (
            <SwiperItem key={i}>
              <Image className='banner' src={item}></Image>
            </SwiperItem>
          ))
        }
      </Swiper>

      <View className='pInfo'>
        <View className='price'>
          <View className='priceL'>
            <Text className='p1'>¥{price}</Text>
            <Text className='p2'>¥{priceOld}</Text>
            <AtTag className='tagsC' type='primary' size='small'  circle>{formatDiscount(price,priceOld)}折</AtTag>
          </View>
          {/* <View className='p3'>剩余：{numOld}</View> */}
        </View>
        {
          seconds>0&&<View className='countdowns'>
            <View className='txt'>活动剩余时间</View>
            <AtCountdown
          seconds={seconds}
          onTimeUp={onTimeUp}
          isShowHour={true}
          isShowDay={true}
          isCard={true}
        />
          </View>
        }
      </View>
      <View className='title'>{title}</View>
    </View>
  )
}
